<template>
  <div class="complatex" ref="complatex">

  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { ref, onMounted, createVNode, render } from 'vue'
import chinaJSON from "./丽水市.json"
// import chinaJSON from "./full.json"
const complatex = ref()

const init = () => {
  const myChart = echarts.init(complatex.value);
  // @ts-ignore
  echarts.registerMap('china', chinaJSON)

  var viewControl = {
    alpha: 50, // 上下旋转的角度
    beta: -2, // 左右旋转的角度
    rotateSensitivity: 3, // 旋转操作的灵敏度
    panSensitivity: 3,
    panMouseButton: 'right',
    distance: 180,
    minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
    maxAlpha: 100, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
    minBeta: 25, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
    maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
    animation: false, // 是否开启动画。[ default: true ]
    animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
    animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
  }

  var option = ref(
    {
      backgroundColor: '#010347',
      geo: [
        {
          show: true,
          map: 'china',
          aspectScale: 1,
          zoom: 2.4,
          roam: false,
          layoutCenter: ["250%", "290%"],
          layoutSize: "300%",
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: "14px",

                // textShadowColor: '#fff',
                // textShadowBlur: 0.2,
                // textShadowOffsetX: -2,
                // textShadowOffsetY: 10,
                // fontWeight: 'bold',
                // fontStyle: 'italic'
              },
            },
            // 鼠标 hover 高亮时图形和标签的样式。
            emphasis: {
              // 是否显示标签
              show: true,
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              show: false,
              // areaColor: '#01215c',
              areaColor: {
                type: "linear",
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 0.8,
              // borderWidth: 1,//设置外层边框
              // borderColor: '#9ffcff',
              // shadowColor: 'rgba(0,54,255, 1)',
              // shadowBlur: 30
            },
            emphasis: {
              show: false,
              color: "#fff",
              areaColor: "rgba(0,254,233,0.6)",
              // areaColor: '#01215c',
            }
          },
          viewControl: viewControl
        },
        // 重影
        {
          type: "map",
          map: "china",
          zlevel: -1,
          aspectScale: 1,
          zoom: 2.4,
          layoutCenter: ["250%", "291%"],
          layoutSize: "300%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              show: true,

              borderWidth: 1,
              // borderColor:"rgba(17, 149, 216,0.6)",
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },
        {
          type: "map",
          map: "china",
          zlevel: -2,
          aspectScale: 1,
          zoom: 2.4,
          layoutCenter: ["250%", "292%"],
          layoutSize: "300%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              show: true,

              borderWidth: 1,
              // borderColor: "rgba(57, 132, 188,0.4)",
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,0.6)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },
        {
          type: "map",
          map: "china",
          zlevel: -3,
          aspectScale: 1,
          zoom: 2.4,
          layoutCenter: ["250%", "293%"],
          layoutSize: "300%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              show: true,

              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(29, 111, 165,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },
        {
          type: "map",
          map: "china",
          zlevel: -4,
          aspectScale: 1,
          zoom: 2.4,
          layoutCenter: ["250%", "294%"],
          layoutSize: "300%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              show: false,

              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },
      ],

      emphasis: {
        itemStyle: {
          areaColor: "#72b2ff",
        },
      },

      series: [
        {
          type: 'map',
          map: 'china',
          geoIndex: 1,
          // zoom: 1.5,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          tooltip: {
            show: false
          },
          label: {
            normal: {
              show: true,

              textStyle: {
                color: "#fff", fontWeight: 'bold', fontSize: "14px",
               
              },
            },
            // normal: {
            //   show: false
            // },
            emphasis: {
              show: false
            }
          },
          roam: false,

          itemStyle: {
            normal: {
              areaColor: '#01215c',
              borderColor: '#3074d0',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#01215c'
            }
          },

          viewControl: viewControl
        },

      ],
    })

  myChart.setOption(option.value);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
}


onMounted(() => {
  init()
})
</script>


<style lang="scss" scoped>
.complatex {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
}
</style>